<template>
<div class="myCard">
  <!-- <div class="title">{{title}}</div> -->
  <div class="title">
    <!--
        插槽：本质上就是一个占位符，当使用组件的时候
        并向组件中插入了内容，那么最终这些插入内容会自动
        找到slot标签，然后把slot标签替换掉，然后渲染到
        slot标签的位置上
     -->
    <slot></slot>
  </div>
  <div class="content">
    内容
  </div>
</div>
</template>
<script>
export default {
  props: {
    // title: String // String表示规定title值的类型
    title: {
      type: String, // String表示规定title值的类型
      default: '我是默认值' // 设置title的默认值
    }
  }
}
</script>
<style lang="scss" scoped>
.myCard{
    min-width: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: inline-block;
    .title{
        border-bottom: 1px solid #ccc;
        padding: 20px;
    }
    .content{
        padding: 20px;
    }
}
</style>
